import { Card, Tree, Row, Col, Tag, Pagination, Table, Button, message } from 'antd'
import React, { Key, useEffect, useState } from 'react'
import { getFindScheduleListRequest, getHosDepartmentListRequest, getHosScheduleListRequest } from '@api/hospital/hospitalList'
import type { bookingScheduleListType, findScheduleListReturnType, getHosDepartmentListReturnType } from '@api/hospital/model/hospitalListTypes'
import { useNavigate, useParams } from 'react-router-dom'

export default function HospitalSchedule() {
    const navigate = useNavigate()
    const { hoscode } = useParams()
    //保存科室数据
    const [treeData, setTreeDate] = useState<getHosDepartmentListReturnType>([])
    //当前页
    const [page, setPage] = useState(1)
    //每页数
    const [limit, setLimit] = useState(3)
    //定义当前科室的排班规则
    const [scheduleRule, setScheduleRule] = useState<bookingScheduleListType>([]);
    //定义当前科室的排班规则总条数
    const [total, setTotal] = useState(0);
    //定义状态保存日期详细
    const [findSchedule, setFindSchedule] = useState<findScheduleListReturnType>([])
    //定义depcode状态
    const [depcode, setDepcode] = useState('')
    //定义workDate状态
    const [workDate, setWorkDate] = useState('')
    //1.定义函数发送获取科室信息请求
    const getHosDepartmentList = async () => {
        const re = await getHosDepartmentListRequest(hoscode as string)
        setTreeDate(re)
        return re
    }
    //2.定义函数发送获取排班日期规则请求
    const getHosScheduleList = async (page: number, limit: number, depCode: string) => {
        const re = await getHosScheduleListRequest({ page: page, limit: limit, hoscode: hoscode as string, depcode: depCode })
        setScheduleRule(re.bookingScheduleList);
        setTotal(re.total);
        return re
    }
    //3.定义函数发送获取当前排班日期下的详细信息
    const getFindSchedule = async (depCode: string, workDate: string) => {
        const re = await getFindScheduleListRequest({
            hoscode: hoscode as string,
            depcode: depCode,
            workDate: workDate
        })
        setFindSchedule(re)
    }
    //初始化获取排班规则数据
    useEffect(() => {
        const getData = async () => {
            //1.发送获取科室信息请求得到科室信息数据
            const HosDepartment = await getHosDepartmentList()
            //2.通过科室信息数据默认定义第一个门诊的depcode为初始值
            const initDepartent = (HosDepartment[0].children as getHosDepartmentListReturnType)[0].depcode
            setDepcode(initDepartent)
            //3.拿到初始depcode发送获取排班日期的规则
            const HosScheduleList = await getHosScheduleList(page, limit, initDepartent)
            //4.通过排班日期规则的数据默认定义第一个日期的workDate为初始值
            const initSchedule = (HosScheduleList.bookingScheduleList[0].workDate)
            setWorkDate(initSchedule)
            //5.拿到初始的depcode和workDate发送获取日期详细信息的请求
            await getFindSchedule(initDepartent, initSchedule)
        }
        getData()
    }, [])
    //1.改变页码的事件回调函数
    const changePageHandle = async (page: number, pageSize: number) => {
        setPage(page)
        setLimit(pageSize)
        //发送科室排班的请求
        const HosScheduleList = await getHosScheduleList(page, pageSize, depcode)
        //根据科室排班请求数据的第一个 请求详细信息
        const initSchedule = HosScheduleList.bookingScheduleList[0].workDate
        setWorkDate(initSchedule)
        //根据第一个科室排班的信息 获取表格详细信息
        await getFindSchedule(depcode, initSchedule)
    }
    //选中树节点=点击门诊
    const selectDepCodeHandle = async (depCodeArr: Key[]) => {
        if (depCodeArr.length === 0) {
            return;
        }
        try {
            const depcode = depCodeArr[0] as string
            //把当前的科室保存在状态中
            setDepcode(depcode)
            setPage(1)           
            //根据点击的值 请求科室排班信息
            const HosScheduleList = await getHosScheduleList(1, limit, depCodeArr[0] as string)
            const initSchedule = HosScheduleList.bookingScheduleList[0].workDate
            //根据第一个科室排班的信息 获取表格详细信息
            getFindSchedule(depCodeArr[0] as string, initSchedule)
        } catch (e) {
            //清空表格
            setFindSchedule([])
            message.error('没有数据')
        }
    }
    //选中日期
    const selectTimeHandle = (workDateValue: string) => {
        return () => {
            setWorkDate(workDateValue)
            //发送详细请求
            getFindSchedule(depcode, workDateValue)
        }
    }
    const columns = [
        {
            title: '序号',
            render(_: any, __: any, index: number) {
                return index + 1
            }
        },
        {
            title: '职称',
            dataIndex: 'title',
        },
        {
            title: '号源时间',
            dataIndex: 'workDate',
        },
        {
            title: '可预约数',
            dataIndex: 'reservedNumber',
        },
        {
            title: '剩余可预约数',
            dataIndex: 'availableNumber',
        },
        {
            title: '挂号费(元)',
            dataIndex: 'amount',
        },
        {
            title: '擅长技能',
            dataIndex: 'skill',
        },
    ];
    const treeStyle = {
        border: "1px solid #000",
        height: "480px",
        overflow: "auto",
    };
    return (
        <Card>
            <p>选择:北京协和医院/多发性硬化专科门诊/2022-04-08</p>
            <Row gutter={20}>
                <Col span={5}>
                    <div>
                        <Tree treeData={treeData as []}
                            expandedKeys={['a4e171f4cf9b6816acdfb9ae62c414d7']}
                            style={treeStyle}
                            fieldNames={{ title: "depname", key: 'depcode' }}
                            onSelect={selectDepCodeHandle}
                        />
                    </div>
                </Col>
                <Col span={19}>
                    <div style={{ marginBottom: '20px' }}>
                        {
                            scheduleRule.map(item => {
                                return (
                                    <Tag key={item.workDate} style={{ cursor: 'pointer' ,background:item.workDate === workDate ? 'red':''}} onClick={selectTimeHandle(item.workDate)}>
                                        <p>{item.workDate}</p>
                                        <p>
                                            {item.availableNumber}/{item.reservedNumber}
                                        </p>
                                    </Tag>
                                )
                            })
                        }
                    </div>
                    <Pagination
                        current={page}
                        pageSize={limit}
                        total={total}
                        onChange={changePageHandle}
                    />
                    <Table columns={columns} style={{ marginTop: '20px' }} rowKey='id' dataSource={findSchedule} pagination={false}></Table>
                    <Button onClick={() => { navigate(-1) }} style={{ marginTop: '30px' }}>返回</Button>
                </Col>
            </Row>
        </Card>
    )
}
